<template>
  <loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </loading>
  <fullScreenContainer style="position: relative;" :width="1920"
                       :height="1080" v-else>
    <!-- 内容 -->
    <el-container class="first-container">
      <!--<editor-fold desc="标题">-->
      <el-header class="header">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1" style="font-size: 24px">
            <el-icon style="font-size: 28px">
              <platform/>
            </el-icon>
            {{ $t('mes.finishedLocation') }}
          </el-menu-item>
        </el-menu>
      </el-header>
      <!--  中间内容    -->
      <el-container class="second-container">
        <!--第一块内容-->
        <el-header class="card-wrapper">
          <!--暂无数据-->
          <el-empty :description="$t('mes.noDataYet')" v-if="!data.oneDate.length"></el-empty>
          <!-- 具体每个小块  -->
          <template v-for="(item, index) in data.oneDate">
            <div class="card-row" :key="index" v-if="index%2==0">
              <div :class="(((Number(data.oneDate[data.oneDate.length/2-index / 2-1].usedInventory)/Number(data.oneDate[data.oneDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2))==100?'serial serial3':data.oneDate[data.oneDate.length/2-index / 2-1]?.isRecommend==='Y'||data.oneDate[data.oneDate.length/2+index/2]?.isRecommend==='Y' ?'serial serial2':'serial'">
                {{ data.oneDate.length / 2 - index / 2 }}
              </div>
              <!-- 具体数据展示  -->
              <div
                :class="(((Number(data.oneDate[data.oneDate.length/2-index / 2-1].usedInventory)/Number(data.oneDate[data.oneDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.oneDate[data.oneDate.length/2-index / 2-1]?.isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.oneDate[data.oneDate.length/2-index / 2-1]?.isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <p class="place">{{
                        data.oneDate[data.oneDate.length / 2 - index / 2 - 1].locationCode || '--'
                      }}</p>
                  </div>
                  <div class="materialCodeList">
                    <p class="code">{{ data.oneDate[data.oneDate.length / 2 - index / 2 - 1].materialCode || '--' }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.oneDate[data.oneDate.length/2-index / 2-1].usedInventory)/Number(data.oneDate[data.oneDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.oneDate[data.oneDate.length/2-index / 2-1]?.isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">
                      {{ data.oneDate[data.oneDate.length / 2 - index / 2 - 1].usedInventory || '--' }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">{{
                        data.oneDate[data.oneDate.length / 2 - index / 2 - 1].inventoryCapacity
                      }}</p>
                  </div>
                </div>
              </div>
              <div :class="(((Number(data.oneDate[data.oneDate.length/2+index/2].usedInventory)/Number(data.oneDate[data.oneDate.length/2+index/2].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.oneDate[data.oneDate.length/2+index/2]?.isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.oneDate[data.oneDate.length/2+index/2]?.isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--<p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{ data.oneDate[data.oneDate.length / 2 + index / 2].locationCode || '--' }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--<p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{ data.oneDate[data.oneDate.length / 2 + index / 2].materialCode || '--' }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.oneDate[data.oneDate.length/2+index/2].usedInventory)/Number(data.oneDate[data.oneDate.length/2+index/2].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.oneDate[data.oneDate.length / 2 + index / 2]?.isRecommend==='Y' ?'numbers1 numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{ data.oneDate[data.oneDate.length / 2 + index / 2].usedInventory }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">{{
                        data.oneDate[data.oneDate.length / 2 + index / 2].inventoryCapacity
                      }}</p>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-header>
        <!--第二块内容-->
        <el-header class="card-wrapper">
          <!--暂无数据-->
          <el-empty :description="$t('mes.noDataYet')" v-if="!data.twoDate.length"></el-empty>
          <template v-for="(item, index) in data.twoDate">
            <div class="card-row" :key="index" v-if="index%2==0">
              <div :class="((Number(data.twoDate[data.twoDate.length/2-index / 2-1].usedInventory)/Number(data.twoDate[data.twoDate.length/2-index / 2-1].maxCapacity)*100).toFixed(2))==100?'serial serial3':data.twoDate[10-index / 2]?.isRecommend==='Y'|| data.twoDate[data.twoDate.length/2+index/2].isRecommend==='Y'?'serial serial2':'serial'">
                {{ data.twoDate.length - index / 2 }}
              </div>
              <div :class="((Number(data.twoDate[data.twoDate.length/2-index / 2-1].usedInventory)/Number(data.twoDate[data.twoDate.length/2-index / 2-1].maxCapacity)*100).toFixed(2))==100?'one-card recommend2':data.twoDate[data.twoDate.length/2-index / 2-1]?.isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.twoDate[data.twoDate.length/2-index / 2-1].isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--                    <p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{
                        data.twoDate[data.twoDate.length / 2 - index / 2 - 1].locationCode || '--'
                      }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--                    <p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{ data.twoDate[data.twoDate.length / 2 - index / 2 - 1].materialCode || '--' }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.twoDate[data.twoDate.length/2-index / 2-1].usedInventory)/Number(data.twoDate[data.twoDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.twoDate[data.twoDate.length/2-index / 2-1].isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{
                        data.twoDate[data.twoDate.length / 2 - index / 2 - 1].usedInventory
                      }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">{{
                        data.twoDate[data.twoDate.length / 2 - index / 2 - 1].inventoryCapacity
                      }}</p>
                  </div>
                </div>
              </div>
              <div :class="(((Number(data.twoDate[data.twoDate.length/2+index/2].usedInventory)/Number(data.twoDate[data.twoDate.length/2+index/2].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.twoDate[data.twoDate.length/2+index/2].isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.twoDate[data.twoDate.length/2+index/2].isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--                    <p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{ data.twoDate[data.twoDate.length / 2 + index / 2].locationCode || '--' }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--                    <p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{ data.twoDate[data.twoDate.length / 2 + index / 2].materialCode || '--' }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.twoDate[data.twoDate.length/2+index/2].usedInventory)/Number(data.twoDate[data.twoDate.length/2+index/2].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.twoDate[data.twoDate.length / 2 + index / 2].isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{ data.twoDate[data.twoDate.length / 2 + index / 2].usedInventory }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">{{
                        data.twoDate[data.twoDate.length / 2 + index / 2].inventoryCapacity
                      }}</p>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!--箭头符号-->
          <div class="arrow-down"></div>
        </el-header>
        <!--第三块内容-->
        <el-header class="card-wrapper">
          <!--暂无数据-->
          <el-empty :description="$t('mes.noDataYet')" v-if="!data.threeDate.length"></el-empty>
          <template v-for="(item, index) in data.threeDate">
            <div class="card-row" :key="index" v-if="index%2==0">
              <div :class="(((Number(data.threeDate[data.threeDate.length/2-index / 2-1].usedInventory)/Number(data.threeDate[data.threeDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2))==100?'serial serial3':data.threeDate[10-index / 2]?.isRecommend==='Y'||data.threeDate[data.threeDate.length/2+index / 2].isRecommend==='Y' ?'serial serial2':'serial'">
                {{ data.threeDate.length + 11 - index / 2 }}
              </div>
              <div :class="(((Number(data.threeDate[data.threeDate.length/2-index / 2-1].usedInventory)/Number(data.threeDate[data.threeDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.threeDate[data.threeDate.length/2-index / 2-1]?.isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.threeDate[data.threeDate.length/2-index / 2-1]?.isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--                    <p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{
                        data.threeDate[data.threeDate.length / 2 - index / 2 - 1].locationCode || '--'
                      }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--                    <p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{
                        data.threeDate[data.threeDate.length / 2 - index / 2 - 1].materialCode || '--'
                      }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.threeDate[data.threeDate.length/2-index / 2-1].usedInventory)/Number(data.threeDate[data.threeDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.threeDate[data.threeDate.length/2-index / 2-1]?.isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{
                        data.threeDate[data.threeDate.length / 2 - index / 2 - 1].usedInventory
                      }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">
                      {{ data.threeDate[data.threeDate.length / 2 - index / 2 - 1].inventoryCapacity }}</p>
                  </div>
                </div>
              </div>
              <div :class="(((Number(data.threeDate[data.threeDate.length/2+index / 2].usedInventory)/Number(data.threeDate[data.threeDate.length/2+index / 2].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.threeDate[data.threeDate.length/2+index / 2].isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.threeDate[data.threeDate.length/2+index / 2].isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--                    <p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{
                        data.threeDate[data.threeDate.length / 2 + index / 2].locationCode || '--'
                      }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--                    <p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{ data.threeDate[data.threeDate.length / 2 + index / 2].materialCode || '--' }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.threeDate[data.threeDate.length/2+index / 2].usedInventory)/Number(data.threeDate[data.threeDate.length/2+index / 2].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.threeDate[data.threeDate.length/2+index / 2].isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{
                        data.threeDate[data.threeDate.length / 2 + index / 2].usedInventory
                      }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">{{
                        data.threeDate[data.threeDate.length / 2 + index / 2].inventoryCapacity
                      }}</p>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!--箭头符号-->
          <div class="arrow-down"></div>
        </el-header>
        <!--第四块内容-->
        <el-header class="card-wrapper">
          <!--暂无数据-->
          <el-empty :description="$t('mes.noDataYet')" v-if="!data.fourDate.length"></el-empty>
          <template v-for="(item, index) in data.fourDate">
            <div class="card-row" :key="index" v-if="index%2==0">
              <div :class="(((Number(data.fourDate[data.fourDate.length/2-index / 2-1].usedInventory)/Number(data.fourDate[data.fourDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2))==100?'serial serial3':data.fourDate[data.fourDate.length/2-index / 2]?.isRecommend==='Y'||data.fourDate[data.fourDate.length/2+index / 2].isRecommend==='Y' ?'serial serial2':'serial'">
                {{
                  data.fourDate.length > 24 ? 45 - index / 2 : data.fourDate.length + 22 - index / 2
                }}
              </div>
              <div :class="(((Number(data.fourDate[data.fourDate.length/2-index / 2-1].usedInventory)/Number(data.fourDate[data.fourDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.fourDate[data.fourDate.length/2-index / 2-1]?.isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.fourDate[data.fourDate.length/2-index / 2-1]?.isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--                    <p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{
                        data.fourDate[data.fourDate.length / 2 - index / 2 - 1].locationCode || '--'
                      }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--                    <p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{
                        data.fourDate[data.fourDate.length / 2 - index / 2 - 1].materialCode || '--'
                      }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.fourDate[data.fourDate.length/2-index / 2-1].usedInventory)/Number(data.fourDate[data.fourDate.length/2-index / 2-1].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.fourDate[data.fourDate.length/2-index / 2-1]?.isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{
                        data.fourDate[data.fourDate.length / 2 - index / 2 - 1].usedInventory
                      }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">
                      {{ data.fourDate[data.fourDate.length / 2 - index / 2 - 1].inventoryCapacity }}</p>
                  </div>
                </div>
              </div>
              <div :class="(((Number(data.fourDate[data.fourDate.length/2+index / 2].usedInventory)/Number(data.fourDate[data.fourDate.length/2+index / 2].maxCapacity))*100).toFixed(2))==100?'one-card recommend2':data.fourDate[data.fourDate.length/2+index / 2].isRecommend==='Y' ?'one-card recommend':'one-card'">
                <!-- 库位名称  -->
                <div :class="data.fourDate[data.fourDate.length/2+index / 2].isRecommend==='Y' ?'titles titles1':'titles'">
                  <div class="locationList">
                    <!--                    <p class="location">{{ $t('wms.storageLocation') }}：</p>-->
                    <p class="place">{{ data.fourDate[data.fourDate.length / 2 + index / 2].locationCode || '--' }}</p>
                  </div>
                  <div class="materialCodeList">
                    <!--                    <p class="materialCode">{{ $t('wms.materialCode') }}：</p>-->
                    <p class="code">{{ data.fourDate[data.fourDate.length / 2 + index / 2].materialCode || '--' }}</p>
                  </div>
                </div>
                <!-- 进度条  -->
                <el-progress class="progress"
                             :percentage="((Number(data.fourDate[data.fourDate.length/2+index / 2].usedInventory)/Number(data.fourDate[data.fourDate.length/2+index / 2].maxCapacity))*100).toFixed(2)"
                             :color="data.customColors">
                  <template v-slot:default="data">
                    <div style="color: red;font-size: 12px" v-if="data.percentage==100">{{'100%' }}</div>
                    <div style="" v-else>{{ data.percentage + '%' }}</div>
                  </template>
                </el-progress>
                <!-- 库位容量  -->
                <div :class="data.fourDate[data.fourDate.length/2+index / 2].isRecommend==='Y' ?'numbers numbers1':'numbers'">
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('mes.occupideQty2') }}：</p>
                    <p class="capacityPlace">{{ data.fourDate[data.fourDate.length / 2 + index / 2].usedInventory }}</p>
                  </div>
                  <div class="capacity">
                    <p class="capacityTitle">{{ $t('wms.surplusQty') }}：</p>
                    <p class="capacityPlace">{{
                        data.fourDate[data.fourDate.length / 2 + index / 2].inventoryCapacity
                      }}</p>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!--下面线条位置-->
          <div class="arrow-down"></div>
        </el-header>
      </el-container>
    </el-container>
    <!--线条 -->
    <div style="z-index:99999999;top: 0;bottom:0;left:0;right:0;position: absolute">
      <svg width="100%" height="100%" viewBox="0 0 400 400" preserveAspectRatio="none">
        <g stroke="#67c23a" fill="white" stroke-width="3">
          <!--  线条 -->
          <polyline id="path-bg" points="53.8, 30 53.8,27 98,27 98,387 155,387" fill="none" stroke="#eee"
                    stroke-width="1"/>
          <polyline id="path" points="53.8, 30 53.8,27 98,27 98,387 155,387" fill="none" stroke="#67c23a"
                    stroke-width="1"/>
          <!--  圆形 -->
          <circle id="myCircle" cx='155' cy='387' r='1.4' class='redCircle' stroke-width="1"/>
          <!--  线条 -->
          <polyline id="path2-bg" points="154.8,30 154.8,27 200,27 200 387,256 387" fill="none" stroke="#eee"
                    stroke-width="1"/>
          <polyline id="path2" points="154.8,30 154.8,27 200,27 200 387,256 387" fill="none" stroke="#67c23a"
                    stroke-width="1"/>
          <!--  圆形 -->
          <circle id="myCircle2" cx='256' cy='387' r='1.4' class='redCircle' stroke-width="1"/>
          <!--  线条 -->
          <polyline id="path3-bg" points="255.8, 30 255.8, 27 302,27 302 387,355 387" fill="none" stroke="#eee"
                    stroke-width="1"/>
          <polyline id="path3" points="255.8, 30 255.8, 27 302,27 302 387,355 387" fill="none" stroke="#67c23a"
                    stroke-width="1"/>
          <!--  圆形 -->
          <circle id="myCircle3" cx='357' cy='387' r='1.4' class='redCircle' stroke-width="1" />
        </g>
      </svg>
    </div>
  </fullScreenContainer>
</template>

<script setup>
import { onMounted, provide, reactive, ref } from 'vue'
import loading from '@/components/loading'
import ScaleBox from 'vue3-scale-box'
import { getInventorycapacity, getMaterialSafeStock } from '@/api/mesApi'
import useI18n from '@/hooks/language'

const data = reactive({
  ready: false,
  processCount: '',
  oneDate: [],
  twoDate: [],
  threeDate: [],
  fourDate: [],
  fiveDate: [],
  shows: false,
  customColors: [{
    color: '#1989fa',
    percentage: 99
  }, {
    color: 'red',
    percentage: 100
  }]
})
onMounted(() => {
  data.ready = true
  inventorycapacity()
  setTime()
})
const { t } = useI18n()
const inventorycapacity = () => {
  getInventorycapacity().then(function (res) {
    if (res.status === 200) {
      data.oneDate = []
      data.twoDate = []
      data.threeDate = []
      data.fourDate = []
      data.fiveDate = []
      res.data.forEach((item, index) => {
        if (item.isRecommend === 'Y') {
          data.shows = true
        }
        if (index < 11) {
          data.oneDate.push(item)
        } else if (index < 22) {
          data.twoDate.push(item)
        } else if (index < 33) {
          data.threeDate.push(item)
        } else if (index < 42) {
          data.fourDate.push(item)
        } else if (index < 55) {
          data.fourDate.push(item)
        } else if (index < 66) {
          data.threeDate.push(item)
        } else if (res.data.length === 90 ? index < 79 : index < 77) {
          data.twoDate.push(item)
        } else if (index < 90) {
          data.oneDate.push(item)
        } else {
          data.fiveDate.push(item)
        }
      })
      console.log(data)
    }
  })
}
const format = (percentage) => {
  return percentage === 100 ? `${100}%` : `${percentage}%`
}
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await inventorycapacity()
  }, 6000)
}

</script>

<style scoped lang="scss">
@forward "index";

@keyframes move {
  0% {
    stroke-dasharray: 0, 511px;
  }
  100% {
    stroke-dasharray: 511px, 0;
  }
}

#path {
  animation: move 3s linear infinite;
}

#path2 {
  animation: move 3s linear infinite;
}

#path3 {
  animation: move 3s linear infinite;
}

* {
  margin: 0;
  padding: 0;
}
</style>
